<script setup>;

import { ref, computed, watch } from 'vue'
import axios from "axios";
import CryptoJS from "crypto-js"
import { backUrl } from "../../assets/js/setting.js";
import { RouterLink } from 'vue-router'
import FindPwdBox from './findPwdBox.vue';
const selected = ref(1) //登录方式
const smsCode = ref('') //验证码
const smsMsgBox = ref(false) //是否显示提示框
const smsBoxMsg = ref('')
let accountNumRecord = ''
const hasSendSms = ref(false)
const accountNum = ref('') //账号名
const password = ref('') //密码
const pwdMsgBox = ref(false) //是否显示提示框
const pwdBoxMsg = ref('')

const register = defineModel('register', { default: false })
const login = defineModel('login', {})
const findPwd = defineModel('findPwd', {})
axios.defaults.baseURL = backUrl;

function checkAcount(num) {
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  const cnPhoneRegex = /^1[3-9][0-9]{9}$/;
  if (num.match(emailRegex)) {
    return 2
  }
  else if (num.match(cnPhoneRegex)) {
    return 1
  }
  return 0
}

//是否为密码登录
const isPwd = computed(() => {
  return selected.value === 1
})
//是否为验证码登录
const isSms = computed(() => {
  return selected.value === 2
})
//账号是否已输入
const hasAccount = computed(() => {
  if (accountNum.value === undefined) {
    return false
  } else if (accountNum.value.length === 0) {
    return false
  }
  return true
})
//密码是否已输入
const hasPwd = computed(() => {
  if (password.value === undefined) {
    return false
  } else if (password.value.length === 0) {
    return false
  }
  return true
})

function change1() {
  selected.value = 1
  smsMsgBox.value = false;
  pwdMsgBox.value = false;
}

function change2() {
  selected.value = 2
  smsMsgBox.value = false;
  pwdMsgBox.value = false;
}

watch(accountNum, () => {
  pwdMsgBox.value = false;
  pwdBoxMsg.value = ''
  smsMsgBox.value = false;
  smsBoxMsg.value = ''
})
watch(password, () => {
  pwdMsgBox.value = false;
  pwdBoxMsg.value = ''
})
watch(smsCode, () => {
  smsMsgBox.value = false;
  smsBoxMsg.value = ''
})

function clickLoginBtn1() {

  if (!hasAccount.value) {
    pwdMsgBox.value = true
    pwdBoxMsg.value = '请输入账号'
    return
  } else if (checkAcount(accountNum.value) === 0) {
    pwdMsgBox.value = true
    pwdBoxMsg.value = '账号格式不正确，请重新输入'
    return
  }
  else if (!hasPwd.value) {
    pwdMsgBox.value = true
    pwdBoxMsg.value = '请输入密码'
    return
  }
  pwdBoxMsg.value = ''
  //登录校验
  axios({
    url: '/BuildMind/user/login/password',
    method: 'POST',
    data: {
      email: accountNum.value,
      password_hash: CryptoJS.SHA256(password.value).toString(),
    },
  }).then((response) => {
    pwdMsgBox.value = true
    pwdBoxMsg.value = response.data.message
    location.href = "./BUILD-MIND";
  }).catch((error) => {
    console.log(error)
    if (error.response.data) {
      pwdMsgBox.value = true
      pwdBoxMsg.value = error.response.data.message
    }
    else if (error.request) {
      pwdMsgBox.value = true
      pwdBoxMsg.value = '网络错误'
    }
  })
}

function clickSmsBtn() {
  if (checkAcount(accountNum.value) === 0) {
    smsMsgBox.value = true;
    smsBoxMsg.value = '账号格式不正确，请重新输入'
    accountNumRecord = ''
    hasSendSms.value = false
    return;
  } else if (accountNum.value !== accountNumRecord) {
    smsMsgBox.value = ''
    smsCode.value = ''
    accountNumRecord = accountNum.value
  } else if (hasSendSms.value === true) {
    smsMsgBox.value = true;
    smsBoxMsg.value = '验证码已发送'
    return;
  } else {
    smsBoxMsg.value = ''
    smsCode.value = ''
    accountNumRecord = accountNum.value
  }
  //申请验证码
  axios({
    url: '/BuildMind/user/login/get_verified',
    method: 'get',
    params: {
      email: accountNum.value,
    },
  }).then((response) => {
    smsMsgBox.value = true
    smsBoxMsg.value = response.data.message
    hasSendSms.value = true
  }).catch((error) => {
    console.log(error)
    if (error.response.data) {
      smsMsgBox.value = true
      smsBoxMsg.value = error.response.data.message
    }
    else if (error.request) {
      smsMsgBox.value = true
      smsBoxMsg.value = '网络错误'
    }
  })
  console.log(document.cookie)
}

function clickLoginBtn2() {
  if (accountNumRecord !== accountNum.value) {
    smsMsgBox.value = true;
    smsBoxMsg.value = '账号已更改，请重新获取验证码'
    hasSendSms.value = false
    return
  } else if (smsCode.value.length !== 6) {
    smsMsgBox.value = true;
    smsBoxMsg.value = '请输入正确格式的验证码'
    return
  }
  smsBoxMsg.value = ''
  //登录校验
  axios({
    url: '/BuildMind/user/login//email',
    method: 'post',
    data: {
      email: accountNum.value,
      verification_code: smsCode.value,
    },
  }).then((response) => {
    smsMsgBox.value = true
    smsBoxMsg.value = response.data.message
    //跳转主页面
    location.href = ".//BUILD-MIND";
  }).catch((error) => {
    console.log(error)
    if (error.response.data) {
      smsMsgBox.value = true
      smsBoxMsg.value = error.response.data.message
    }
    else if (error.request) {
      smsMsgBox.value = true
      smsBoxMsg.value = '网络错误'
    }
  })
}

function toRegister() {
  login.value = false
  register.value = true
  findPwd.value = false
}
function toFindPwd() {
  login.value = false
  register.value = false
  findPwd.value = true
}


</script>

<template>
  <div class="login-box">

    <div class="form-login-type-toggle">

      <div id="pwd-login" class="form-login-type" :class="{ 'select-toggle': isPwd }" @click="change1()">
        <!-- 账号密码登录组件 -->
        密码登录
      </div>

      <div id="sms-login" class="form-login-type" :class="{ 'select-toggle': isSms }" @click="change2()">
        <!-- 短信登录组件 -->
        验证码登录
      </div>
    </div>

    <div class="form-login">
      <div class="form">
        <div id="pwd-login-form" :style="{ 'display': isPwd ? 'block' : 'none' }">
          <form id="pwdlogin" method="post" onsubmit="return false;">
            <!--账号输入框-->
            <div class="account-input">
              <input id="pwd-account-number" autocomplete="off" name="loginname" placeholder="邮箱" tabindex="1"
                type="text" v-model="accountNum">
              <span class="clear-btn" @click="accountNum = ''" v-show="accountNum.length !== 0">
                <el-icon :size="16">
                  <CircleCloseFilled />
                </el-icon>
              </span>
            </div>
            <!--密码输入框-->
            <div id="entry" class="item item-fore2">
              <input id="loginpwd" autocomplete="off" name="loginpwd" placeholder="密码" tabindex="2" type="password"
                v-model="password">
            </div>
            <!--提示信息-->
            <div class="msg-wrap" :style="{ 'display': pwdMsgBox ? 'block' : 'none' }">
              <div class="msg-error pwd-login-err-msg">
                {{ pwdBoxMsg }}
              </div>
            </div>
            <!--忘记密码-->
            <div class="forget password">
              <div class="" @click="toFindPwd">忘记密码</div>
            </div>
            <!-- 登录按钮 -->
            <div class="pwd-login-submit-box">
              <button id="pwd-login-submit" class="submit-btn" :class="{ 'submit-btn-disable': !hasAccount }"
                :disabled="!hasAccount" @click="clickLoginBtn1">登录
              </button>
            </div>
          </form>
        </div>
        <div id="sms-login-form" :style="{ 'display': isSms ? 'block' : 'none' }">
          <!--邮箱、验证码输入框主体-->
          <form id="smslogin" method="post" onsubmit="return false;">
            <!--邮箱输入框-->
            <div class="account-input">
              <input id="sms-account-number" autocomplete="off" name="aaccountNumber" placeholder="邮箱" type="text"
                v-model="accountNum">
              <span class="clear-btn" @click="accountNum = ''" v-show="accountNum.length !== 0">
                <el-icon :size="16">
                  <CircleCloseFilled />
                </el-icon>
              </span>
            </div>
            <!--验证码输入框-->
            <div class="captcha-input">
              <input id="sms-code" autocomplete="off" class="captcha-code" maxlength="6" name="smsCode"
                placeholder="请输入验证码" type="text" v-model="smsCode" :disabled="!hasSendSms">
              <button id="send-sms-code-btn" :disabled="accountNum.length === 0" @click="clickSmsBtn">获取验证码
              </button>
            </div>
            <!--提示信息-->
            <div class="msg-wrap" :style="{ 'display': smsMsgBox ? 'block' : 'none' }">
              <div class="msg-error sms-login-err-msg">
                {{ smsBoxMsg }}
              </div>
            </div>
            <!-- 登录按钮 -->
            <div class="sms-login-submit-box">
              <button id="sms-login-submit" class="submit-btn" :class="{ 'submit-btn-disable': !hasSendSms }"
                :disabled="!hasSendSms" @click="clickLoginBtn2">登录
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <!--注册-->
    <div class="to-register">
      <button id="to-register-btn" class="" @click="toRegister">立即注册
      </button>
    </div>
  </div>
</template>

<style scoped>
/* 登录框整体布局 */
.login-box {
  width: 520px;
  margin: 0 auto;
  padding: 40px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* 登录方式切换按钮 */
.form-login-type-toggle {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
  gap: 40px;
}

.form-login-type {
  font-size: 18px;
  padding: 12px 0;
  cursor: pointer;
  color: #666;
  position: relative;
}

.select-toggle {
  color: #409eff;
  font-weight: 500;
}

.select-toggle::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #409eff;
}

/* 账号输入框容器 */
.account-input {
  position: relative;
  width: 100%;
}

/* 清除按钮 */
.clear-btn {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #999;
  line-height: 1;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

/* 输入框基础样式 */
input[type="text"],
input[type="password"] {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  font-size: 16px;
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  background-color: #FAFAFA;
  box-sizing: border-box;
  margin-bottom: 12px;
}

input::placeholder {
  color: #999;
}

/* 登录按钮 */
.submit-btn {
  width: 100%;
  padding: 16px;
  font-size: 18px;
  color: white;
  background-color: #409eff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-btn:hover {
  background-color: #66b1ff;
}

.submit-btn-disable {
  background-color: #a0cfff;
  cursor: not-allowed;
}

/* 验证码输入框容器 */
.captcha-input {
  position: relative;
  width: 100%;
  height: 52px;
  margin-bottom: 12px;
}

/* 验证码输入框 */
.captcha-input input {
  width: calc(100% - 120px);
  height: 100%;
  margin: 0;
}

/* 验证码按钮 */
.captcha-input button {
  position: absolute;
  right: 0;
  top: 0;
  width: 110px;
  height: 100%;
  background-color: #ecf5ff;
  border: 1px solid #d9ecff;
  border-radius: 8px;
  color: #409eff;
  font-size: 14px;
  cursor: pointer;
}

.captcha-input button:disabled {
  cursor: not-allowed;
  color: #999;
  background-color: #f4f4f5;
  border-color: #e4e7ed;
}

/* 错误提示信息 */
.msg-error {
  color: #ff4d4f;
  font-size: 14px;
  margin: -8px 0 15px;
  line-height: 1;
  padding: 4px 0;
}

/* 忘记密码链接 */
.forget.password {
  margin: -5px 0 20px;
  color: #999;
  font-size: 14px;
  cursor: pointer;
}

.forget.password div:hover {
  color: #409eff;
}

/* 注册按钮 */
#to-register-btn {
  width: 100%;
  padding: 16px;
  font-size: 18px;
  color: #409eff;
  background-color: transparent;
  border: 1px solid #409eff;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 20px;
  transition: all 0.3s ease;
}

#to-register-btn:hover {
  color: white;
  background-color: #409eff;
}

/* 输入框聚焦样式 */
input[type="text"]:focus,
input[type="password"]:focus {
  border-color: #409eff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
</style>